<style lang="less" scoped>
@import "../assets/css/config.less";
*{
  margin: 0;
}
.flex-row{
  display: flex;
  justify-content: start;
}
.index {
  background: #f8f8f9;
}
.loading {
  animation: myloading 1s linear infinite;
  margin-top: 100px;
}
@keyframes myloading {
  from {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.question_list {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

.ques_content {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}
.xuanxiang {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

.card_row {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.edit_out {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  margin-left: 20px;
}
.ivu-select-dropdown {
  width: auto;
}
.left{
  text-align: left
}
.sider-out{
  overflow: auto;
}
.header{
  position: fixed;
  top:0;
  width: 100%;
  min-width: 1210px;
  z-index: 100;
}
.secondary-navigation{
  top: 58px;
  left: 0;
  right: 0;
  background-color: #fff;
  position: fixed;
  z-index: 90;
  padding: 5px 15px ;
  margin: 0 0 30px;
  border-bottom: 1px solid #F2F2F2;
  .item{
    cursor: default;
    margin: 0;
    .text{
      position: relative;
      font-size: 15px;
      padding: 0 15px;
      margin: 10px 0;
      border-right: 2px solid #F2F2F2;
      .active{
        color: @color2;
        &::after{
          content:'';
          // position: absolute;
          float: left;
          bottom: 0;
          border-bottom: 5px solid @color2;
          width: 100%;
          transform: translateY(10px);
        }
      }
    }
    &:hover{
      color: @color2;
    }
  }
  transition: top 0.3s;
}

.menu{
  display: flex;
  flex-direction: column;
  width: 20%;
  // overflow:auto;
  // height:100%;
  padding: 0 30px 30px;
  // background-color: #F7F6F4;
  div{
    // height: 100%;
    background-color: #F7F6F4;
  }
}
a{
  font-size: 14px;
}
</style>

<template>
  <div id="index">
    <div class="header">
      <myheader></myheader>
    </div>
    <Layout style="margin-top: 60px;background-color:#fff" id="content" >
      <div  :style="{'min-width': '1210px'}">
        
        <div class="flex-row secondary-navigation" :style="showNavigation ? 'top:58px' : 'top:-5px'">
          <div class="item" v-for="(lesson, index) in menu" :name="index + ''" :key="index" @click="chooseLesson(index, true)">
            <div class="text" v-if="lesson.lesson == 'wx_new'">
              <p :class="currentLesson.lesson === 'wx_new'?'active':''">微信小程序教程</p>
            </div>
            <div class="text" v-if="lesson.lesson == 'ydhlw'">
              <p :class="currentLesson.lesson === 'ydhlw'?'active':''">移动互联网</p>
            </div>
            <div class="text" v-if="lesson.lesson == 'js'">
              <p :class="currentLesson.lesson === 'js'?'active':''">JavaScript</p>
            </div>
            <div class="text" v-if="lesson.lesson == 'wx'">
              <p :class="currentLesson.lesson === 'wx'?'active':''">微信小程序</p>
            </div>
          </div>
        </div>
        <div class="flex-row" style="margin-top:80px">
           <div class="menu">
              <div>
                <my-own-menu :menu="currentLesson.menu" @handleMenuClick="handleMenuClick"></my-own-menu>
              </div>
            </div>
          <!-- <Sider hide-trigger :style="{background: '#fff'}" class="sider-out">
            <Menu
              ref="menu"
              class="mysider"
              theme="light"
              width="auto"
              v-if="menu.length>0"
            >
              <Submenu v-for="(lesson, index) in menu" :name="index + ''" :key="index">
                <template slot="title" style="margin-left:0;">
                  <Icon type="ios-navigate"></Icon>
                  <div v-if="lesson.lesson == 'wx_new'"  style="display:inline;">
                    微信小程序教程
                  </div>
                  <div v-if="lesson.lesson == 'ydhlw'"  style="display:inline;">
                    移动互联网
                  </div>
                  <div v-if="lesson.lesson == 'js'"  style="display:inline;">
                    JavaScript
                  </div>
                  <div v-if="lesson.lesson == 'wx'" style="display:inline">
                    微信小程序
                  </div>
                </template>

                <Submenu  v-for="(experiment, key1) in lesson.menu"
                  :name="index + '-' + key1"
                  :key="key1"
                >
                  <template slot="title">
                    <Icon type="ios-navigate"></Icon>
                    {{ experiment.title }}
                  </template>

                  <MenuItem
                  v-for="(section, key2) in experiment.subtitle"
                  :key="key2"
                  :name="index + '-' + key1 + '-' + key2"
                  style="padding-left:50px;"
                >
                  <div @click="queryQuestions(lesson.lesson + ',' + key1 + ',' + key2, lesson.lesson + ' / ' + experiment.title + ' / ' + section)">
                    {{section}}
                  </div>
                </MenuItem>

                </Submenu>
              </Submenu>
            </Menu>

          </Sider> -->

          <Content :style="{padding: '24px 24px'}">        
            <div class="question_list">
              <h3 v-if="questions.length === 0 && section !== ''">还没有为本节出题哦～</h3>
              <div v-for="(ques,index) in questions" class="card_row" :key="index">
                <Card style="width:80%;margin-bottom: 20px">
                  <div class="ques_content">
                    <div class="left" v-html="ques.question"></div>
                    <Divider />
                    <div v-if="ques.type === 'panduan'">
                      答案：
                      <p v-if="ques.answer[0] === 'yes'">正确</p>
                      <p v-if="ques.answer[0] === 'no'">错误</p>
                    </div>
                    <div class="xuanxiang" v-if="ques.type === 'xuanze'">
                      <div v-for="(item, index) in ques.items" :key="index">
                        <span v-if="index === 0">A</span>
                        <span v-if="index === 1">B</span>
                        <span v-if="index === 2">C</span>
                        <span v-if="index === 3">D</span>
                        <span v-if="index === 4">E</span>
                        <span v-if="index === 5">F</span>
                        <span v-if="index === 6">G</span>
                        <span v-if="index === 7">H</span>
                        <span v-if="index === 8">I</span>
                        <span v-if="index === 9">J</span>
                        <span>{{item}}</span>
                      </div>
                    </div>
                    <div v-if="ques.type === 'xuanze'" >
                      答案：
                      <div v-for="(ans, index) in ques.answer" :key="index">
                      <p v-if="ans === '1'">A</p>
                      <p v-if="ans === '2'">B</p>
                      <p v-if="ans === '3'">C</p>
                      <p v-if="ans === '4'">D</p>
                      <p v-if="ans === '5'">E</p>
                      <p v-if="ans === '6'">F</p>
                      <p v-if="ans === '7'">G</p>
                      <p v-if="ans === '8'">H</p>
                      <p v-if="ans === '9'">I</p>
                      <p v-if="ans === '10'">J</p>
                    </div>
                    </div>
                    <div v-if="ques.type === 'jianda'">
                      答案：
                      <span>言之有理即可</span>
                    </div>
                    <Divider />
                    <div class="left" v-if="ques.illustrationContent !== ''">答案解析：
                    <div class="left" v-html="ques.illustrationContent"></div>
                    </div>
                  </div>
                </Card>

                <div class="edit_out">
                  <div @click="editQuestion(ques)">
                    <a>编辑这个题目</a>
                  </div>
                  <div style="margin-top:10px" @click="deleteThisQuestion(ques, index)">
                    <a style="color: red">删除这个题目</a>
                  </div>
                </div>
              </div>
            </div>
          </Content>
        </div>
      
      </div>
    </Layout>
  </div>
</template>

<script>
import header from "../components/header.vue";
import myOwnMenu from "../components/myOwnMenu.vue";
import { getMenu, queryQuestion, deleteQuestion } from "../api/api";
import { debounce } from "../utils/debounce"

export default {
  name: "questions",
  data: function() {
    return {
      bg: {
        width: `${window.innerWidth}px`,
        height: "auto"
      },
      menu: [],
      questions: [],
      section: "",
      userGroup: "",
      mymenu: sessionStorage.mymenu,
      currentLesson: [],
      lastScrollTop: 0,
      showNavigation: true
    };
  },
  mounted() {
    let that =this;
    window.addEventListener('scroll', debounce(function(e){
      let scrollTop = document.documentElement.scrollTop || document.body.scrollTop
      if(scrollTop>that.lastScrollTop){
        that.showNavigation = false
      } else {
        that.showNavigation = true
      }
      that.lastScrollTop = scrollTop
    }, 50, false))
    this.userGroup = JSON.parse(this.$store.state.user).userGroup;

    getMenu({ lesson: "all" })
      .then(response => {
        if (response.state === true) {
          response.result.forEach(element => {
            this.menu.push(element);
          });
          this.currentLesson = this.menu[0];
          this.queryQuestions(
            this.$route.params.menu, 
            this.currentLesson.lesson + ' / ' + this.currentLesson.menu[0].title + ' / ' + this.currentLesson.menu[0].subtitle[0]
          )
          this.chooseLesson(0, false);
        } else {
          this.$Message.error(response.msg);
        }
      })
      .catch(error => {
        this.$Message.error(error.status);
      });
  },
  components: {
    myheader: header,
    "my-own-menu": myOwnMenu
  },
  computed:{
    currentLessonStr(){
      return this.$route.params.menu;
    }
  },
  watch:{
    currentLessonStr: function(val){
      let _menu = val.split(',')
      this.currentLesson = this.menu.find(ele => {
        if(_menu[0] === ele.lesson)
        return ele
      })
      this.queryQuestions(
        val, 
        this.currentLesson.lesson + ' / ' + this.currentLesson.menu[_menu[1]].title + ' / ' + this.currentLesson.menu[_menu[1]].subtitle[_menu[2]]
      )
    }
  },
  methods: {
    chooseLesson(index, isMenuClick){
      if(isMenuClick){
        if(this.$route.params.menu!==this.menu[index].lesson + ',' + 0 + ',' + 0){
          this.$router.push({
            name: "question",
            params: {
              menu: this.menu[index].lesson + ',' + 0 + ',' + 0, 
            },
          });
        }
      }

    },
    handleMenuClick(data){
      const {index, key, goback} = data
      if(goback) {
      } else {
        if(this.$route.params.menu!==this.currentLesson.lesson + ',' + index + ',' + key){
          this.$router.push({
            name: "question",
            params: {
              menu: this.currentLesson.lesson + ',' + index + ',' + key, 
            },
          });
        }
      }
    },
    queryQuestions(section, name) {
      this.section = name;
      queryQuestion({ section })
        .then(response => {
          if (response.state === true) {
            this.questions = response.result;
          } else {
            this.$Message.error(response.msg);
          }
        })
        .catch(error => {
          this.$Message.error(error.status);
        });
    },
    editQuestion(ques) {
      this.$router.push({
        name: "giveQuestion",
        params: {
          state: "edit",
          question: ques
        }
      });
    },
    deleteThisQuestion(ques, idx) {
      this.$Modal.confirm({
        title: "确认",
        content: "确认要删除这个题目吗？",
        onOk: () => {
          deleteQuestion({
            _id: ques._id
          })
            .then(response => {
              if (response.state === true) {
                this.$Message.success("删除成功");
                this.questions.splice(idx, 1);
              } else {
                this.$Message.error("删除失败！ " + response.msg);
              }
            })
            .catch(error => {
              this.$Message.error(error.status);
            });
        }
      });
    }
  }
};
</script>